<template>
  <div class="account-info bg-fog-9 p-16px pt-0">
    <p class="text-text-3">
      <svg class="h-10px w-10px fill-text-6 rotate-180" @click="$router.go(-1)">
        <use xlink:href="@/assets/symbol-defs.ef6a79c4.svg#icon_Arrow"></use>
      </svg>
      <span class="text-text-3 text-15px px-4px font-800">
        {{ $t("title") }}
      </span>
    </p>
    <div class="account-info__item bg-fog-18 p-12px rounded-8px">
      <p
        class="item-title text-14px text-text-3 m-0 pb-12px bc-border-bottom font-700"
      >
        {{ $t("profile") }}
      </p>
      <div class="item-content flex justify-between pt-12px">
        <div class="content-left flex items-center">
          <img
            src="@/assets/account-info/head2_l.png"
            class="rounded-50 h-54px"
          />
          <div class="ml-12px text-text-3">
            <p class="text-13px m-0 !mb-8px">Bzitdbncmpyb</p>
            <p class="text-12px m-0 mt-4px font-100">
              {{ $t("user_id") }} ：26314837
            </p>
          </div>
        </div>
        <div class="content-right">
          <van-button
            class="bc-btn h-30px"
            @click="$router.push('/my-profile')"
          >
            <svg class="fill-text-3 h-12px w-12px">
              <use
                xlink:href="@/assets/symbol-defs.ef6a79c4.svg#icon_Edit"
              ></use>
            </svg>
            {{ $t("edit") }}
          </van-button>
        </div>
      </div>
    </div>
    <div class="account-info__item bg-fog-18 p-12px rounded-8px mt-12px">
      <p
        class="item-title text-14px text-text-3 m-0 pb-12px bc-border-bottom font-700"
      >
        {{ $t("contact_info") }}
      </p>
      <div class="item-content pt-12px">
        <p class="text-12px text-text-3 m-0 mb-8px">
          {{ $t("verification") }}
        </p>
        <div
          class="email-verification px-10px py-6px mt-6px h-36px rounded-4px flex justify-between items-center"
        >
          <span class="text-12px">peter@1024.tt</span>
          <span class="text-12px text-text-1 flex items-center">
            <img
              src="https://bc.game/assets/check.f102afdd.png"
              class="h-13px px-4px"
            />

            <span class="text-10px">
              {{ $t("verified") }}
            </span>
          </span>
        </div>
      </div>
      <div class="item-content pt-12px">
        <p class="text-12px text-text-3 m-0">{{ $t("phone") }}</p>
        <p class="text-12px text-text-3 m-0 text-text-4 mt-6px">
          {{ $t("tip") }}
        </p>
        <van-button
          class="bc-btn mt-6px"
          block
          @click="$router.push('/phone-validate')"
        >
          <svg class="fill-text-3 h-12px w-12px">
            <use xlink:href="@/assets/symbol-defs.ef6a79c4.svg#icon_Edit"></use>
          </svg>
          {{ $t("add") }}
        </van-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useI18n } from "vue-i18n";

const { t } = useI18n();
const $t = key => {
  return t("account." + key);
};
</script>

<style lang="less" scoped>
.account-info {
  .email-verification {
    background: var(--fog-20);
  }
}
</style>
